<template>
  <div class="definition-list">
    <DataTable
      :columns="tableColumns"
      :data="tableData"
      :pagination="pagination"
      :loading="loading"
      :selection-mode="'multiple'"
      :selection="selection"
      :show-export="true"
      :show-add="true"
      :actions="actions"
      @update:selection="handleSelectionChange"
      @page-change="handlePageChange"
      @sort="handleSort"
      @refresh="handleRefresh"
      @export="handleExport"
      @add="handleAdd"
      @action="handleAction"
    >
      <!-- 自定义状态列 -->
      <template #delFlag="{ row }">
        <Tag 
          :value="row.delFlag === 0 ? '正常' : '已删除'"
          :severity="row.delFlag === 0 ? 'success' : 'danger'"
        />
      </template>
      
      <!-- 自定义分类列 -->
      <template #categoryId="{ row }">
        <Tag 
          :value="getCategoryName(row.categoryId)"
          severity="info"
        />
      </template>
    </DataTable>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import DataTable from '@/components/DataTable/index.vue'
import Tag from 'primevue/tag'
import type { TableColumn, TableAction, Pagination } from '@/types'

interface Props {
  tableData: any[]
  pagination: Pagination
  loading: boolean
  selection: any[]
}

interface Emits {
  (e: 'update:selection', selection: any[]): void
  (e: 'page-change', page: number, pageSize: number): void
  (e: 'sort', sortField: string, sortOrder: number): void
  (e: 'refresh'): void
  (e: 'export'): void
  (e: 'add'): void
  (e: 'action', action: TableAction, row: any, index: number): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 获取分类名称
const getCategoryName = (categoryId: number) => {
  const categoryMap: Record<number, string> = {
    1: '请假流程',
    2: '报销流程',
    3: '审批流程',
    4: '采购流程'
  }
  return categoryMap[categoryId] || '未知分类'
}

// 表格列配置
const tableColumns: TableColumn[] = [
  {
    prop: 'id',
    label: '流程ID',
    sortable: true,
    headerStyle: 'width: 100px'
  },
  {
    prop: 'name',
    label: '流程名称',
    sortable: true,
    headerStyle: 'width: 200px'
  },
  {
    prop: 'modelKey',
    label: '模型标识',
    sortable: true,
    headerStyle: 'width: 150px'
  },
  {
    prop: 'categoryId',
    label: '流程分类',
    headerStyle: 'width: 120px; text-align: center',
    bodyStyle: 'text-align: center',
    slot: 'categoryId'
  },
  {
    prop: 'version',
    label: '版本号',
    sortable: true,
    headerStyle: 'width: 100px'
  },
  {
    prop: 'delFlag',
    label: '状态',
    headerStyle: 'width: 100px; text-align: center',
    bodyStyle: 'text-align: center',
    slot: 'delFlag'
  },
  {
    prop: 'createTime',
    label: '创建时间',
    sortable: true,
    headerStyle: 'width: 180px',
    formatter: (value: any) => {
      return new Date(value).toLocaleString('zh-CN')
    }
  }
]

// 操作按钮配置
const actions: TableAction[] = [
  {
    key: 'design',
    label: '设计',
    icon: 'pi pi-pencil',
    severity: 'primary',
    handler: (row: any) => {
      emit('action', { key: 'design', label: '设计', icon: 'pi pi-pencil', severity: 'primary' }, row, 0)
    }
  },
  {
    key: 'edit',
    label: '编辑',
    icon: 'pi pi-file-edit',
    severity: 'info',
    handler: (row: any) => {
      emit('action', { key: 'edit', label: '编辑', icon: 'pi pi-file-edit', severity: 'info' }, row, 0)
    }
  },
  {
    key: 'view',
    label: '查看',
    icon: 'pi pi-eye',
    severity: 'secondary',
    handler: (row: any) => {
      emit('action', { key: 'view', label: '查看', icon: 'pi pi-eye', severity: 'secondary' }, row, 0)
    }
  },
  {
    key: 'delete',
    label: '删除',
    icon: 'pi pi-trash',
    severity: 'danger',
    handler: (row: any) => {
      // 删除操作直接通过emit触发，不需要在handler中再次emit
      emit('action', { key: 'delete', label: '删除', icon: 'pi pi-trash', severity: 'danger' }, row, 0)
    }
  }
]

// 处理选择变化
const handleSelectionChange = (newSelection: any[]) => {
  emit('update:selection', newSelection)
}

// 处理分页变化
const handlePageChange = (page: number, pageSize: number) => {
  emit('page-change', page, pageSize)
}

// 处理排序
const handleSort = (sortField: string, sortOrder: number) => {
  emit('sort', sortField, sortOrder)
}

// 处理刷新
const handleRefresh = () => {
  emit('refresh')
}

// 处理导出
const handleExport = () => {
  emit('export')
}

// 处理新增
const handleAdd = () => {
  emit('add')
}

// 处理操作
const handleAction = (action: TableAction, row: any, index: number) => {
  emit('action', action, row, index)
}
</script>

<style scoped>
.definition-list {
  margin-top: 16px;
}
</style>
